const path = require("path")
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { ProgressPlugin, ProvidePlugin } = require("webpack")

module.exports = {
    entry: {

        chunk: ['react', 'react-dom/client'],
        app: {
            import: path.resolve(__dirname, "../", "src/main.js"),
            dependOn: "chunk"
        }
    },
    // 出口
    output: {
        path: path.resolve(__dirname, "../", "dist"),
        filename: "js/[name].[chunkhash:8].js",
        clean: true
    },
    plugins: [
        new HtmlWebpackPlugin({
            // template: "./public/index.html"
            template: path.resolve(__dirname, "../", "public/index.html"),
            inject: "body",
            title: "vue-element-admin",
            favicon: path.resolve(__dirname, "../", "public/favicon.ico"),
            filename: "index.html"
        }),
        new ProgressPlugin({
            handler(percentage, message, ...args) {
                if (percentage === 1) {
                    console.log("100% 打包/启动成功~");
                } else {
                    console.log(`${Math.floor((percentage * 100))}% 正在打包...`)
                }
            }
        }),
        new ProvidePlugin({
            React: path.resolve(__dirname, "../", "node_modules/react/index.js"),
        })
    ],
    module: {
        rules: [
            { test: /\.(js|jsx|ts|tsx)$/, use: "babel-loader", exclude: /node_modules/ },

            { test: /\.(css|scss)$/, use: ["style-loader", "css-loader", "sass-loader"] },

            // {test:/\.png|jpg|svg|gif|jpeg|webp$/,use:"file-loader"}
            // {test:/\.png|jpg|svg|gif|jpeg|webp$/,use:"url-loader"}
            {test:/\.(png|jpg|svg|gif|jpeg|webp)$/,type:'asset/resource'}
        ]
    },
    resolve: {
        alias: {
            // 配置解析src路径
            "@": path.resolve(__dirname, "../", "src")
        },
        // 配置允许省略哪些后缀
        extensions: ['.js', '.jsx', '.ts', '.tsx', '.vue']
    }

}

